import React, { useEffect } from 'react';
import {
  Form,
  Modal,
  Grid,
  Input,
  InputNumber,
  Card,
  TimePicker,
  Select,
} from '@arco-design/web-react';
import styles from './style/index.module.less';
import * as Model from '@/services/model';
import * as Constants from './constants';
const { useForm } = Form;
const { Row, Col } = Grid;
interface RangeEditorModalProps {
  time: Partial<Model.WorkPeriod.TimeRange> | false;
  onCancel: () => void;
  onOk: (params: Partial<Model.WorkPeriod.TimeRange>) => void;
}

export const RangeEditorModal = (props: RangeEditorModalProps) => {
  const [form] = useForm();

  useEffect(() => {
    if (props.time !== false) {
      form.setFieldsValue(props.time);
    }
  }, [props.time]);

  const submit = async () => {
    const res = await form.validate();
    if (res) {
      props.onOk(res);
    }
  };
  return (
    <Modal
      visible={props.time !== false}
      title="修改时段"
      mountOnEnter
      unmountOnExit
      onCancel={props.onCancel}
      onOk={submit}
      alignCenter={true}
      okText="提交"
      cancelText="取消"
      style={{ width: 400 }}
    >
      <Form
        form={form}
        labelAlign="right"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="星期" field="weekday" required>
              <Select
                style={{ width: 200 }}
                placeholder="请选择星期"
                allowClear
              >
                {Constants.weekDays.map((e) => {
                  return (
                    <Select.Option value={e} key={e}>
                      {e}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="开始" field="start" required>
              <TimePicker format="HH:mm" placeholder="开始时间" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="结束" field="end" required>
              <TimePicker format="HH:mm" placeholder="结束时间" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
